<comment>
  ## 图片上传组件 解决elementui上传之后的表单校验问题
  只适用于单图上传与回显
</comment>
<template>
  <div
    class="single-upload"
  >
    <el-upload
      v-if="isChange"
      v-loading="isUploaded"
      accept="image/jpeg,image/gif,image/png"
      :show-file-list="false"
      :action="CMBASE.baseUploadAction"
      list-type="picture-card"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :on-success="handleUpload"
      :before-upload="beforeUpload"
      :limit="limit"
      :multiple="multiple"
      :on-error="handleError"
    >
      <img v-if="value" width="100%" :src="CMBASE.baseFileContext+value" alt="" class="upload-img">
      <i v-else class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" />
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: String
    },
    value: {
      type: String
    },
    limit: {
      type: Number,
      default: 1
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isChange: true,
      isUploaded: false,
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    beforeUpload(file) {
      // 文件大小校验
      const judeSize = file.size / 1024 < this.CMBASE.baseUploadSize
      if (!judeSize) {
        this.$message({
          message: `上传文件大小不能超过 ${(this.CMBASE.baseUploadSize / 1024).toFixed()}M!`,
          type: 'warning'
        })
        return false
      }
      this.isUploaded = true
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      this.handleImageList(fileList)
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.handleImageList(fileList)
    },
    // 文件上传成功时的钩子
    handleUpload(file, fileList) {
      if (fileList.response.state === 'success') {
        this.handleImageList(fileList)
        this.$message({ message: '上传成功', type: 'success' })
      } else {
        this.$message({ message: '上传失败', type: 'error' })
      }
      this.isUploaded = false
      this.isChange = false
      setTimeout(() => { this.isChange = true }, 10)
    },
    // 上传错误时的钩子
    handleError() {
      this.isUploaded = false
      this.$message({ message: '上传失败', type: 'error' })
    },
    // 处理文件列表
    handleImageList(fileList) {
      try {
        const imageList = []
        fileList.length > 0 && fileList.forEach(item => {
          if (item.response !== undefined) {
            imageList.push(item.response.path)
          }
        })
        //  发送上传之后的文件
        this.$emit('input', imageList.join(','))
        //  将触发类型改为change
        this.dispatch('ElFormItem', 'el.form.change', imageList)
      } catch (e) {
        throw e
      }
    },
    // 解决上传校验问题
    // elementUI mixins - emitter 中拷贝的
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root
      var name = parent.$options.componentName

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent

        if (parent) {
          name = parent.$options.componentName
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params))
      }
    }
  }
}
</script>
<style lang="scss">
  .single-upload{
    .el-upload-list{
      img{
        object-fit: contain;
      }
    }
    .el-upload--picture-card{
      display: inline-grid;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img{
        width: 120px;
        height: 120px;
        object-fit: contain;
      }
    }
  }
</style>
